<template>
  <app-header @refresh="refresh" />
  <div class="relative bg-[#e0e0dc] pb-5">
    <div class="curtain"></div>
    <suspense>
      <template #default>
        <overview-message class="position-container" />
      </template>
      <template #fallback>
        <div
          v-loading="true"
          element-loading-text="Loading..."
          class="h-[200px] pl-[20px] position-container"
        />
      </template>
    </suspense>
    <suspense>
      <template #default>
        <overview-shortcuts class="position-container" />
      </template>
      <template #fallback>
        <div
          v-loading="true"
          element-loading-text="Loading..."
          class="h-[200px] pl-[20px] position-container"
        />
      </template>
    </suspense>
    <suspense>
      <template #default>
        <overview-events class="position-container" />
      </template>
      <template #fallback>
        <div
          v-loading="true"
          element-loading-text="Loading..."
          class="h-[200px] pl-[20px] position-container"
        />
      </template>
    </suspense>
    <suspense>
      <template #default>
        <overview-fan-speed class="position-container" />
      </template>
      <template #fallback>
        <div
          v-loading="true"
          element-loading-text="Loading..."
          class="h-[200px] pl-[20px] position-container"
        />
      </template>
    </suspense>
  </div>
</template>

<script setup lang="ts">
import AppHeader from '@/components/AppHeader/AppHeader.vue';
import OverviewEvents from './OverviewEvents.vue';
import OverviewMessage from './OverviewMessage.vue';
import OverviewShortcuts from './OverviewShortcuts.vue';
import OverviewFanSpeed from './OverviewFanSpeed.vue';

const refresh = () => {
  location.reload();
};
provide('refresh', refresh);
</script>

<style lang="scss" scoped>
.curtain {
  position: absolute;
  top: -20px;
  width: 105%;
  /* height: 450px; */
  height: 300px;
  background-color: #000033;
  z-index: 0;
}
.position-container {
  position: relative;
  margin-bottom: 30px;
  margin-right: 20px;
  margin-left: 20px;
  .overview-component {
    margin-bottom: 30px;
  }
  &.message-container {
    margin-top: 20px;
  }
}
</style>
